<script setup>
import {  ref  } from 'vue';
import { Histogram, Edit, Delete } from '@element-plus/icons-vue'
import Dialog from "@/components/Dialog.vue"
import Dialog2 from '@/components/Dialogchart.vue';
import Chart from "@/views/Chart/index.vue"
import { useUserStore } from '@/stores/user';
import { addShortLink, getShortData } from '@/apis/link.js'
import { useRoute } from 'vue-router';

const route = useRoute()
const userStore = useUserStore()

const params = ref({
    pageNum: 1,
    pageSize: 10
})


// -----------控制编辑对话框的出现模块
const isdialog_edit = ref(false)//-------编辑短链信息
const changedialog1 = () => {
    isdialog_edit.value = !isdialog_edit.value
}

// ------------控制数据图表弹出框模块
const isdialog_chart = ref(false)//-------查看图表
const chartdata = ref([])
const linkdata = ref()
const cancelchart=()=>{
    isdialog_chart.value=false
}
const openCharts = async(i) =>{
    const res = await getShortData(userStore.LinkList[i].shortUri, userStore.LinkList[i].gid)
    linkdata.value=userStore.LinkList[i]
    chartdata.value=res.data
    console.log(res);
    isdialog_chart.value = !isdialog_chart.value
}

// ------------创建短链接模块
const originUrl = ref('')//--------源地址
const GroupId = ref('')//-----短链类别
const isdialog_add = ref(false)//-------查看图表
const validType = ref(0)
const validTime = ref(null)
const title = ref('')
// 获取短连接列表
const createShortLink = async() => {
    await addShortLink({ gid: GroupId.value, title:title.value,originUrl: originUrl.value, validType: validType.value, validTime :validTime.value})
    // console.log(res);
    originUrl.value=''
    userStore.getLinkList1(route.query.gid)
    // console.log(route.query.gid);
    isdialog_add.value = !isdialog_add.value
}
// -----------删除短链接
const Delshortlink=async(i)=>{
     await userStore.delLink({ gid: userStore.LinkList[i].gid, shortUri: userStore.LinkList[i].shortUri })
}


const handleSizeChange=()=>{

}
</script>
<template>
    <div class="Main">
        <div class="pagetop">
            <div class="buildlink">
                <el-input v-model="originUrl" type="text" placeholder="请输入 http:// 或 https:// 开头的网址" />
                <el-button type="primary" @click="isdialog_add=!isdialog_add">创建短链</el-button>
            </div>
        </div>
        <div class="extra">
            <el-table :data="userStore.LinkList" style="width: 100%">
                <el-table-column label="短链信息">
                    <template #default="scope">
                        <div class="URLinfo">
                            <img :src="userStore.LinkList[scope.$index].icon||'src/assets/images/logo1.svg'">
                            <span>{{ userStore.LinkList[scope.$index].title }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="fullShortUrl" label="短链接网址">
                    <template #default="scope">
                        <div class="shortLink">
                            <a :href="userStore.LinkList[scope.$index].fullShortUrl" target="_blank">{{
                                userStore.LinkList[scope.$index].fullShortUrl }}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="pv" label="访问次数" />
                <el-table-column prop="uip" label="访问IP数" />
                <el-table-column fixed="right" label="操作" width="100">
                    <template #default="scope">
                        <div id="operate">
                            <el-icon @click="openCharts(scope.$index)">
                                <Histogram />
                            </el-icon>
                            <el-icon @click="isdialog_edit=!isdialog_edit">
                                <Edit />
                            </el-icon>
                            <el-popconfirm @confirm.prevent="Delshortlink(scope.$index)" width="100"
                                confirm-button-text="确定" cancel-button-text="取消" icon-color="#626AEF" title="你确定删除吗?">
                                <template #reference>
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize"
            :page-sizes="[10, 15, 20, 30]" :background="true" layout="sizes, prev, pager, next,jumper"
            :total="userStore.LinkList?.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <!-- 编辑短链弹出框 -->
        <Dialog @comfirm="changedialog1" title="编辑短链" width="500" @cancel="isdialog_edit=!isdialog_edit"
            :isdialog="isdialog_edit">
            <template #default>
                <div class="edit_link">
                    <div class="section">
                        <h2>被编辑的短链</h2>
                        <span>https://sourl.cn/qcRjLn</span>
                    </div>
                    <div class="section">
                        <h2>跳转链接</h2>
                        <el-input v-model="input" style="width: 100%" disabled />
                    </div>
                    <div class="section">
                        <h2>短链标题</h2>
                        <el-input v-model="input" style="width: 100%" />
                    </div>
                    <div class="section">
                        <h2>短链分组</h2>
                        <el-select v-model="value" placeholder="Select" size="large" style="width: 100%">
                            <el-option v-for="item in userStore.LinkGroup" :key="item" :label="item.name"
                                :value="item.gid" />
                        </el-select>
                    </div>
                </div>

            </template>
        </Dialog>
        <!-- 图表弹出框 -->
        <Dialog2 @cancel="cancelchart" @comfirm="changedialog2" title="" width="865" :isdialog="isdialog_chart">
            <template #default>
                <Chart :linkdata="linkdata" :chartdata="chartdata"></Chart>
            </template>
        </Dialog2>
        <!-- 新增短链弹出框 -->
        <Dialog @comfirm="createShortLink" title="创建短链" width="500" :isdialog="isdialog_add">
            <template #default>
                <div class="section">
                    <h2>跳转链接</h2>
                    <el-input v-model="originUrl" style="width: 100%" />
                </div>
                <div class="section">
                    <h2>短链标题</h2>
                    <el-input v-model="title" style="width: 100%" />
                </div>
                <div class="section">
                    <h2>有效期</h2>
                    <el-radio-group v-model="validType">
                        <el-radio :value="0">永久</el-radio>
                        <el-radio :value="1">短期</el-radio>
                    </el-radio-group>
                </div>
                <div class="section" v-show="validType==1">
                    <h2>有效期</h2>
                    <el-input v-model="validTime" style="width: 100%" />
                </div>
                <div class="section">
                    <h2>短链分组</h2>
                    <el-select v-model="GroupId" size="large" style="width: 100%">
                        <el-option v-for="item in userStore.LinkGroup" :key="item" :label="item.name"
                            :value="item.gid" />
                    </el-select>
                </div>
            </template>
        </Dialog>
    </div>
</template>

<style lang="scss" scoped>
.Main {
    width: 100%;
    height: 670px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    user-select: text;
    .buildlink {
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        align-items: center;
        height: 60px;

        .el-input {
            margin-left: 100px;
            height: 40px;
            width: 60%;
        }

        .el-button {
            width: 150px;
            height: 40px;
            margin-left: 40px;
        }
    }

    .el-pagination {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .extra{
        padding: 10px;
        .URLinfo{
            display: flex;
            align-items: center;;
            img{
                width: 24px;
                margin-right: 10px;
            }
        }
        .shortLink{
            a{
                color: rgb(52,102,227);
            }
        }
       .el-table{
            .cell #operate{
                display: flex;
                justify-content: space-between;
                .el-icon{
                    cursor: pointer;
                    padding: 2px;
                    border: 1px solid ;
                    border-radius: 50%;
                }
                .el-icon:hover{
                    color: rgb(52, 100, 224);
                }
            } 
        } 
    }
       .section {
        
            margin: 20px 0;

            h2 {
                color: black;
                line-height: 40px;
            }
        } 
}
</style>
